<template>
  <view>
    <view class="notic_title">
      <view class="wei" :class="index==item.id?'active':''" @click="chgindex(item)" v-for="item in titlelist" :key="item.id">
        {{item.title}}
        <u-icon v-if="item.desc" name="arrow-down" color="rgb(203,203,203)" :size="26"></u-icon>
        <u-icon v-else name="arrow-up" color="rgb(203,203,203)" :size="26"></u-icon>
      </view>
    </view>
    <view class="page-box" v-if="index==1">
      <uni-card class="tabSwiper" v-for="(item,i) in dataList" :key="item.id" @click="weiclickContent(item,i)">
        <view class="top">
          <view class="left">
            <u-icon name="bell" :size="26" color="#2979ff"></u-icon>
            <view class="title">{{ item.title }}</view>
            <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
          </view>
          <view class="right">{{ item.date }}</view>
        </view>
        <view class="item">
          <view class="content">
            <view class="title u-line-2">{{ item.content }}</view>
          </view>
        </view>
      </uni-card>
      <!-- 展示信息 -->
      <u-modal :show="show" @close="modalclose" @cancel="modalclose" @confirm="modalclose" showCancelButton :closeOnClickOverlay="true" :title="title" :content='content'></u-modal>
    </view>
    <view class="page-box" v-if="index==2">
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="options1" v-for="(item,index) in selecList" :key="item.id" @click="delAction(index)" :auto-close="false">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content ">
              <uni-card class="tabSwiper" @click="yiclickContent(item)">
                <view class="top">
                  <view class="left">
                    <u-icon name="bell" :size="26" color="#2979ff"></u-icon>
                    <view class="title">{{ item.title }}</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                  </view>
                  <view class="right">{{ item.date }}</view>
                </view>
                <view class="item">
                  <view class="content">
                    <view class="title u-line-2">{{ item.content }}</view>
                  </view>
                </view>
              </uni-card>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <!-- <uni-card class="tabSwiper" v-for="(item) in dataList" :key="item.id" @click="clickContent(item)">
      </uni-card> -->
      <!-- 展示信息 -->
      <u-modal :show="show" @close="modalclose" @cancel="modalclose" @confirm="modalclose" showCancelButton :closeOnClickOverlay="true" :title="title" :content='content'></u-modal>
    </view>
  </view>
</template>

<script>
export default {
  onShow() {
    this.getNoticeList() // 获取数据
    uni.getStorage({
      key: 'selecList',
      success:  (res) =>{
        this.selecList = JSON.parse(res.data||"[]")
      }
    })
  },
  onHide() {
    uni.setStorage({
      key: 'selecList',
      data: JSON.stringify(this.selecList)
    })
  },
  methods: {
    chgindex(item) {
      item.desc = !item.desc
      if (item.id == 1) {
        this.dataList.reverse()
      } else {
        this.selecList.reverse()
      }
      this.index = item.id
    },
    async getNoticeList() {
      let [, back] = await uni.request({
        url: 'http://127.0.0.1/noticeList'
      })
      back.data.rows.sort(function (a, b) {
        return Date.parse(b.date) - Date.parse(a.date)
      })
      this.dataList = back.data.rows
    },
    weiclickContent(item, i) {
      this.selecList.push(item) // 添加数据
      this.selecList.sort(function (a, b) {
        // 将数据排序
        return Date.parse(b.date) - Date.parse(a.date)
      })
      this.dataList.splice(i, 1) // 移除数据
      // 显示数据
      this.show = true
      this.title = item.title
      this.content = item.content
    },
    yiclickContent(item) {
      // 显示数据
      this.show = true
      this.title = item.title
      this.content = item.content
    },
    modalclose() {
      this.show = false
    },
    delAction(i) {
      this.selecList.splice(i, 1)
    }
  },
  data() {
    return {
      index: 1,
      titlelist: [
        {
          id: 1,
          title: '未读',
          desc: true
        },
        {
          id: 2,
          title: '已读',
          desc: true
        }
      ],
      dataList: [],
      selecList: [],
      options1: [
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }
      ],
      // 模态框数据
      show: false,
      title: '',
      content: ''
    }
  }
}
</script>

<style lang="scss">
.notic_title {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .wei {
    display: flex;
    padding: 0rpx 40rpx;
    border-bottom: 8rpx solid transparent;
  }

  .active {
    color: #00f;
    border-bottom: 8rpx solid #00f;
  }
}

.tabSwiper {
  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      justify-content: space-between;

      .title {
        font-weight: 700;
        color: #000;
        line-height: 70rpx;
        height: 70rpx;
        font-size: 40rpx;
      }
    }

    .right {
      line-height: 70rpx;
      height: 70rpx;
    }
  }
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 25rpx 0;
  }
}
</style>
